<template>
	<!-- 我的钱包 -->
	<view >
		<view class="head-box yh-fcF" style="width: 100%;">
			
			<view class=""  style="width: 100%;">
				<view class="" style="height: 60rpx;line-height: 60rpx;background: #fff;">
					<view @click="cla(0)" style="width: 49%;text-align: center;float: left;"
					
					:style="index==0?'font-weight: 700;color:#000':'font-weight: 500;color:#999'"
					>
						直推好友
					</view>
					<view style="color: #999;float: left;">
						|
					</view>
					<view @click="cla(1)" style="width: 49%;text-align: center;float: left;"
						:style="index==1?'font-weight: 700;color:#000':'font-weight: 500;color:#999'"
					>
						间推好友
					</view>
				</view>
					<view @click="look(item)" style="float: left;background: #fff;border-bottom: 1rpx solid #f3f3f3 ;;margin-top: 1rpx;width: 100%;padding-left: 2%;padding-top: 30rpx;padding-bottom:40rpx;" v-for="(item,index) in list" :key="index">
						<view class="yh-red yh-fz38" style="float: left;width: 100rpx;">
								<image class="img" :src="item.avatar?item.avatar:'/static/logo.png'" mode=""></image>
						</view>
						<view class="yh-fc333 yh-mt10" style="width:80%;float: left;">
								
							<view class="" style="float: left;width: 40%;">
								<view class="yh-lh64 yh-fz34" style="font-size: 26rpx;font-weight: 700;margin-top: 10rpx;">
									{{item.nickname}}
									
								</view>
								<view class="yh-lh54" style="font-size: 24rpx;color: #999;margin-top: 5rpx;">
									{{item.createtime}}
								</view>
							</view>
							
							<view v-if="lang==0" style="float: left;;font-size: 26rpx;color: #999;position: relative;top:35rpx;">
								<text v-if="item.is_kuang>0" >正在挖矿</text>
								<text v-else >未开启挖矿</text>
							</view>
							<view  v-if="lang==0" style="width: 200;height: 30rpx;text-align: right;margin-top: 30rpx;color: #000;">
							{{item.ks_his}}
							</view>
						</view>
						
			
					<noData :noDataShow="noDataShow" hintText="暂无好友"></noData>
					<!--list-->
					
					
				</view>
			</view>
			<!--加载loadding-->
			<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
			<tui-nomore v-if="!pullUpOn" backgroundColor="#f7f7f7"></tui-nomore>
			<!--加载loadding-->
			
			
			
			<uni-popup ref="popup1" maskClick type="center">
				<view style="width: 300px;background: #fff;text-align: center;height: 260rpx;border-radius: 0.2em;">
					<view style="font-weight: 700;padding-top: 30rpx;">
						当前剩余时间
						
						<view @click="clo()" style="float: right;font-size: 18px;right:20rpx;position: relative;top:-30rpx">
							×
						</view>
					</view>
					<view style="width: 100%;margin-top: 20rpx;float: left;margin-left:60rpx;">
						<view style="float: left;">
							初阶旷工：
						</view>
						<wly-countdown style="float: left;" :day="d" :hour="h" :minute="i" :second="s" showType="slot">
						    <template v-slot="{day, hour, minute, second}">
						        <text>{{day}}天</text>
						        <text class="time" v-if="day||hour||minute||second">{{hour}}:{{minute}}:{{second}}</text>
						    </template>
						</wly-countdown>
					</view>
					
					<view style="width: 100%;float: left;;margin-left:60rpx;">
					
						<view style="float: left;">
							进阶旷工：
						</view>
						<wly-countdown style="float: left;" :day="d1" :hour="h1" :minute="i1" :second="s1" showType="slot">
						    <template v-slot="{day, hour, minute, second}">
						        <text>{{day}}天</text>
						        <text class="time" v-if="day||hour||minute||second">{{hour}}:{{minute}}:{{second}}</text>
						    </template>
						</wly-countdown>
					</view>
					<view style="width: 100%;float: left;;margin-left:60rpx;">
						<view style="float: left;">
							高阶旷工：
						</view>
						<wly-countdown style="float: left;" :day="d2" :hour="h2" :minute="i2" :second="s2" showType="slot">
						    <template v-slot="{day, hour, minute, second}">
						        <text>{{day}}天</text>
						        <text class="time" v-if="day||hour||minute||second">{{hour}}:{{minute}}:{{second}}</text>
						    </template>
						</wly-countdown>
					</view>
					
				</view>
			</uni-popup>
			
		</view>
	</view>
</template>

<script>
	import noData from '@/components/noData.vue'
	export default {
		components: {
			noData
		},
		data() {
			return {
				pageIndex: 1, // 当前页
				has_more: false, // 是否有更多
				loadding: false,
				pullUpOn: true,
				list: [],
				money:'',
				type:0,
				
				page: 1,
				total: 0,
				list: [],
				index:0,
				
				d:0,
				h:0,
				i:0,
				s:0,
				d1:0,
				h1:0,
				i1:0,
				s1:0,
				d2:0,
				h2:0,
				i2:0,
				s2:0,
				i2:0,
				lang:1,
			}
		},
		onShow(){
			let lang = uni.getStorageSync('lang')
			if(lang){
				this.lang = lang;
				this.navList = [
					// { icon: '/static/a1.png', label: '我的钱包', url: '/pages/my/mywallet' },
					
				
					{ icon: '/static/a2.png', label: '邀请好友', url: '/pages/share/share_dea' },
					{ icon: '/static/a3.png', label: '收货地址', url: '/pages/index/select' },
					// { icon: '/static/a4.png', label: '帮助中心', url: '/pages/my/wenti' },
					// { icon: '/static/a5.png', label: '支付宝绑定', url: '' },
					// { icon: '/static/a6.png', label: '身份认证', url: '' },
					// { icon: '/static/a7.png', label: '检查更新', url: '' },
					
					// { icon: '/static/a9.png', label: '保险箱', url: '' }
				]
			}else{
				this.lang = 0
			}
		},
		onLoad: function(options) {
			this.type = options.type;
			this.getList();
			
		},
		onReachBottom: function() {
			if (this.list.length < this.total) {
				this.page++;
				this.getList();
			}
		},
		computed: {
			noDataShow() {
				return !this.list.length
			}
		},
		methods: {
			clo(){
				this.$refs.popup1.close();
			},
			look(item){
				this.get_info1(item.id);
		
			},
			cla(index){
				this.index = index
				this.page = 0;
				this.list = [];
				this.getList();
			},
			get_info1(uid){
				uni.showLoading({ title: '正在加载', mask: true });
				var _this = this;
				_this.$api.request('/api/user/getkuang_chi', {uid:uid}, uni.getStorageSync('token'), function(res) {
							uni.hideLoading();
					if (res.code == 1) {
						_this.info = res.data;
						_this.chan = res.data.chan
		
						if(res.data.list[0]){
							_this.shijian(res.data.list[0].endtime)
							_this.shijian1(res.data.list[1].endtime)
							_this.shijian2(res.data.list[2].endtime)
								
							
						}
							_this.$refs.popup1.open();
						
					}
				});
			},
			getInfo(){
				uni.showLoading({
					title: '加载中...'
				})
				this.$http.get(this.$api.userWallet, {
					page: this.pageIndex,
					size: 10
				}).then(res => {
					uni.hideLoading()
					this.loadding = false;
					if (res.code === 1) {
						this.money = res.data.money
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			shijian(str){
				this.d = parseInt(str/86400);
				this.h = (str - this.d*86400)/3600
				this.i = (str - this.d*86400 - this.h*3600)/60
				this.s == str - this.d*86400 - this.h*3600 - this.i*60
				
				
			},
			shijian1(str){
				this.d1 = parseInt(str/86400);
				this.h1 = (str - this.d1*86400)/3600
				this.i1 = (str - this.d1*86400 - this.h1*3600)/60
				this.s1 == str - this.d1*86400 - this.h1*3600 - this.i1*60
			},
			shijian2(str){
				this.d2 = parseInt(str/86400);
				this.h2 = (str - this.d2*86400)/3600
				this.i2 = (str - this.d2*86400 - this.h2*3600)/60
				this.s2 == str - this.d2*86400 - this.h2*3600 - this.i2*60
			},
			getList() { // 获取明细列表
				
				uni.showLoading({ title: '正在加载', mask: true });
				var _this = this;
				_this.$api.request('/api/user/topups_user', {page:this.page,type:this.type,index:this.index}, uni.getStorageSync('token'), function(res) {
					uni.hideLoading();
					if (res.code == 1) {
						_this.total = res.data.total;
						_this.score = res.data.score
						if (_this.page == 1) {
							_this.list = res.data.data;
						} else {
							_this.list = _this.list.concat(res.data.data);
						}
					}
					uni.hideLoading();
				});
				
			}
			
		}
	}
</script>

<style lang="scss">
	.head-box {
		position: relative;
		z-index: 99;
		width: 100%;
	
		box-sizing: border-box;

		background-repeat: no-repeat;
		background-position: top center;
		background-size: 100%;
		.img{
			width: 90rpx;
			height: 90rpx;
			border-radius: 20em;
		}
	}
	
</style>
